<template>
	<div
		class="cover"
		:style="{
			backgroundImage:
				'linear-gradient(to bottom,#555, transparent),url(' +
				'https://thfl.tsinghua.edu.cn/images/' +
				img +
				')'
		}"
	>
		<h1>{{ title }}</h1>
		<span>{{ subtitle }}</span>
	</div>
</template>

<script>
export default {
	name: 'Cover',
	props: {
		title: String,
		img: String,
		subtitle: String
	},
	data() {
		return {
			image: '../assets/cover.png'
		};
	},
	mounted() {
		// console.log(this.img);
	}
};
</script>

<style lang="less" scoped>
.cover {
	position: relative;
	background-size: cover;
	background-position: center;
	height: 50vh;
	width: calc(100%-100px);
	display: flex;
	justify-content: center;
	align-items: flex-end;
	color: white;
	font-size: 20px;
	flex-direction: column;
	padding: 0 50px;
	overflow: hidden;

	// 添加网格背景
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: 
			linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent),
			linear-gradient(90deg, rgba(0, 255, 157, 0.1) 1px, transparent 1px),
			linear-gradient(rgba(0, 255, 157, 0.1) 1px, transparent 1px);
		background-size: 100% 100%, 20px 20px, 20px 20px;
		z-index: 1;
	}

	// 添加扫描线动画
	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 5px;
		background: linear-gradient(90deg, transparent, rgba(0, 255, 157, 0.5), transparent);
		box-shadow: 0 0 20px rgba(0, 255, 157, 0.5);
		animation: scan 3s linear infinite;
		z-index: 2;
	}

	h1 {
		position: relative;
		margin-right: 50px;
		font-size: 3em;
		text-transform: uppercase;
		letter-spacing: 4px;
		z-index: 3;
		text-shadow: 
			0 0 10px rgba(0, 255, 157, 0.5),
			2px 2px 4px rgba(0, 0, 0, 0.5);
		animation: titleGlow 2s infinite alternate;

		// 添加标题装饰线
		&::before {
			content: '';
			position: absolute;
			bottom: -10px;
			left: 0;
			width: 100%;
			height: 2px;
			background: linear-gradient(90deg, transparent, #00ff9d, transparent);
		}

		// 添加标题装饰块
		&::after {
			content: '';
			position: absolute;
			top: -10px;
			right: -20px;
			width: 40px;
			height: 40px;
			border-right: 2px solid #00ff9d;
			border-top: 2px solid #00ff9d;
			opacity: 0.7;
			animation: cornerRotate 4s linear infinite;
		}
	}

	span {
		position: relative;
		margin-right: 50px;
		font-size: 1.2em;
		letter-spacing: 2px;
		color: rgba(255, 255, 255, 0.8);
		z-index: 3;
		text-shadow: 0 0 5px rgba(0, 255, 157, 0.3);
		animation: subtitleFade 3s infinite alternate;

		&::before {
			content: '< ';
			color: #00ff9d;
			opacity: 0.7;
		}

		&::after {
			content: ' />';
			color: #00ff9d;
			opacity: 0.7;
		}
	}

	@media screen and (max-width: 768px) {
		height: 20vh;
		align-items: center;
		text-align: center;

		h1 {
			margin: 0;
			font-size: 2em;

			&::after {
				display: none;
			}
		}

		span {
			font-size: 12px;
			margin: 10px 0 0 0;
		}
	}
}

@keyframes scan {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(100vh);
	}
}

@keyframes titleGlow {
	0% {
		text-shadow: 0 0 10px rgba(0, 255, 157, 0.5),
					2px 2px 4px rgba(0, 0, 0, 0.5);
	}
	100% {
		text-shadow: 0 0 20px rgba(0, 255, 157, 0.8),
					2px 2px 4px rgba(0, 0, 0, 0.5);
	}
}

@keyframes cornerRotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes subtitleFade {
	0% {
		opacity: 0.7;
	}
	100% {
		opacity: 1;
	}
}
</style>
